import { useEffect, useState } from 'react'
import { Navigate, /*NavLink, Routes, Route, */useNavigate, useLocation, useRoutes } from 'react-router-dom'
import { Tabs, Watermark } from 'antd'
import type { TabsProps } from 'antd'
import Home from './pages/home'
import About from './pages/table'

export default function App() {
  const ele = useRoutes([
    { path: '/home', element: <Home /> },
    { path: '/table', element: <About /> },
    { path: '/', element: <Navigate to="/home" /> },
  ])
  const items: TabsProps['items'] = [
    {
      key: 'home',
      label: 'Home',
    },
    {
      key: 'table',
      label: 'Table',
    },
  ];
  const [activeKey, setActiveKey] = useState('')
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    const key = location.pathname.slice(1)
    setActiveKey(key)
  }, [activeKey, location.pathname])
  function tabChange(key: string) {
    navigate(`/${key}`)
    setActiveKey(key)
  }

  return (
    <Watermark content={"He"} style={{ height: '100%' }}>
      <Tabs activeKey={activeKey} items={items} onChange={tabChange} />
      <div>
        {ele}
      </div>
      {/*<Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/table" element={<Table />} />
        <Route path="/" element={<Navigate to="/home" />}></Route>
      </Routes>*/}
    </Watermark>
  )
}
